<template>
    <div class="home-category">
        <ul class="menu">
            <li v-for="item in menuList" :key="item.id" @mousemove="categoryId = item.id">
                <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
                <template v-if="item.children">
                    <RouterLink
                        v-for="sub in item.children"
                        :to="`/category/sub/${sub.id}`"
                        :key="sub.id"
                    >{{ sub.name }}</RouterLink>
                </template>
                <template v-else>
                    <span>
                        <XtxSkeleton
                            width="60px"
                            height="18px"
                            style="margin-right:5px"
                            bg="rgba(255,255,255,0.2)"
                        />
                        <XtxSkeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" />
                    </span>
                </template>
            </li>
        </ul>
        <Popup :currCategoryList="currCategoryList" />
    </div>
</template>

<script>
import { SET_BRAND_INFO } from "@/store/category/actionsType";
import Popup from "./Popup.vue"
import { useStore } from "vuex"
import { computed, ref } from "vue"
export default {
    name: "HomeCategory",
    components: { Popup },
    setup() {
        const store = useStore();
        const menuList = computed(() => {
            return store.state.category.menuList;
        });

        // 获取弹出层的推荐商品数据
        const categoryId = ref(null)
        const currCategoryList = computed(() => {
            return menuList.value.find(item => item.id === categoryId.value)
        })

        // 获取品牌数据
        store.dispatch(SET_BRAND_INFO)
        return {
            menuList,
            categoryId,
            currCategoryList,
        };
    },

}
</script>

<style scoped lang='less'>
.home-category {
    width: 250px;
    height: 500px;
    background: rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 99;
    .menu {
        li {
            padding-left: 40px;
            height: 50px;
            line-height: 50px;
            &:hover {
                background: @xtxColor;
            }
            a {
                margin-right: 4px;
                color: #fff;
                &:first-child {
                    font-size: 16px;
                }
            }
        }
    }
    &:hover {
        .layer {
            display: block;
        }
    }
}
.xtx-skeleton {
    animation: fade 1s linear infinite alternate;
}
@keyframes fade {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}
</style>